<!--审核端首页-->
<template>
	<div class="check-dashboard">
		<div class="top-part">
			<div class="title">企业管理服务平台</div>
			<div class="right">
				<el-input type="text" v-model="unitName" placeholder="输入搜索关键词">
					<svg-icon slot="suffix" icon-class="search" class="search-icon" @click="gotoEnterprise(unitName)" />
				</el-input>
				<el-dropdown>
					<div class="user" style="cursor: pointer;">
						<img :src="avatar" alt />
						<span>管理员</span>
					</div>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="logout">登出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
		<div class="content-part">
			<div class="left-part">
				<div class="select-part box">
					<div>当前展示数据</div>
					<div class="myselect" :class="{ open: openIcon }">
						<el-select class="autoWidth" v-model="supportUnitId" @change="changeSupportUnit"
							@visible-change="openTrue">
							<template
								slot="prefix">{{( supportUnitDict.find(s => s.value === supportUnitId) || {}).label}}</template>
							<el-option v-for="(item, index) in supportUnitDict" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
						<svg-icon class-name="open-icon" icon-class="down-arrow" />
					</div>
					<div style="margin-left: 1rem;">管辖区</div>
					<div class="myselect" :class="{ open: policeOrgOpenIcon }">
						<el-select class="autoWidth" v-model="policeOrgId" @change="changePoliceOrg"
							@visible-change="policeOrgOpenTrue">
							<template
								slot="prefix">{{( policeOrgDict.find(s => s.value === policeOrgId) || {}).label}}</template>
							<el-option v-for="(item, index) in policeOrgDict" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
						<svg-icon class-name="open-icon" icon-class="down-arrow" />
					</div>
				</div>
				<div class="chart-part">
					<div class="one-part box">
						<div class="title">数据总览</div>
						<div class="content-box">
							<div class="content-item">
								<span class="name">纳管单位</span>
								<span class="num" style="cursor: pointer;"
									@click="gotoEnterprise(false)">{{ ngData }}</span>
							</div>
							<div class="content-item">
								<span class="name">企业备案率</span>
								<span class="num unit">{{ recordRate }}</span>
							</div>
						</div>
						<div class="bar-list">
							<div class="bar-item" v-for="(item, index) in teskTypeList" :key="index">
								<div class="name">{{ item.name }}</div>
								<div class="bar">
									<div class="bar-inner" :style="`width: ${item.rate}%;background: ${getBarInnerColor(item.rate)};`"></div>
									<div class="bar-num unit">{{ item.rate }}</div>
								</div>
							</div>
						</div>
					</div>
					<div class="two-part">
						<div class="daily-part box">
							<div class="title">日常工作情况概览</div>
							<div class="text-box">
								<div class="text-item">
									<div class="num">{{ teskData.total }}</div>
									<div class="name">任务总数</div>
								</div>
								<div class="shu"></div>
								<div class="text-item">
									<div class="num unit">{{ teskData.completeRate }}</div>
									<div class="name">任务完成率</div>
								</div>
								<div class="text-item">
									<div class="num">{{ teskData.adventCount }}</div>
									<div class="name">临期数</div>
								</div>
								<div class="text-item">
									<div class="num">{{ teskData.overdueCount }}</div>
									<div class="name">逾期数</div>
								</div>
							</div>
							<div class="extra-text-box">
								<div class="text-item">
									<span class="name">交互任务：</span>
									<span class="num">{{ teskData.typeOneCount }}</span>
								</div>
								<div class="text-item">
									<span class="name">通报任务：</span>
									<span class="num">{{ teskData.typeTwoCount }}</span>
								</div>
								<div class="text-item">
									<span class="name">专项任务：</span>
									<span class="num">{{ teskData.typeThreeCount }}</span>
								</div>
							</div>
						</div>
						<div class="property-part box">
							<div class="title">资产备案情况</div>
							<div class="num-list">
								<div class="num-item" v-for="(item, index) in propertyList" :key="index">
									<div class="icon-box">
										<svg-icon class-name="svg-icon" :icon-class="item.iconClass" />
										<div class="right">
											<div class="name">{{ item.name }}</div>
											<div class="num" @click="gotoProperty(item.path)">{{ item.total }}</div>
										</div>
									</div>
									<div class="num-box">
										<span class="name">备案率：</span>
										<span class="num unit"
											@click="gotoProperty(item.hasPoliceOrgCodePath)">{{ item.recordRate }}</span>
									</div>
								</div>
							</div>
							<div class="heng"></div>
							<div class="text-box">
								<div class="sp-item">
									<svg-icon class-name="svg-icon" icon-class="xinxixitong" />
									<div class="right">
										<div class="name">信息系统</div>
										<div class="num" style="cursor: pointer;" @click="gotoProperty('/property/index?tabName=2')">
											{{ systemData.total }}</div>
									</div>
								</div>
								<div class="text-item">
									<div class="it">
										<span class="name">一级数：</span>
										<span class="num">{{ systemData.firstLevelCount }}</span>
									</div>
									<div class="it">
										<span class="name">备案率：</span>
										<span class="num unit">{{ systemData.recordRate }}</span>
									</div>
								</div>
								<div class="text-item">
									<div class="it">
										<span class="name">二级数：</span>
										<span class="num">{{ systemData.secondLevelCount }}</span>
									</div>
									<div class="it">
										<span class="name">测评率：</span>
										<span class="num unit">{{ systemData.testRate }}</span>
									</div>
								</div>
								<div class="text-item">
									<div class="it">
										<span class="name">三级数：</span>
										<span class="num">{{ systemData.thirdLevelCount }}</span>
									</div>
									<div class="it">
										<span class="name">评估率：</span>
										<span class="num unit">{{ systemData.evalRate }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-part box">
				<div class="title">支撑单位综合排名</div>
				<div class="rank-list">
					<el-row class="header">
						<el-col :offset="2" :span="7">支撑单位</el-col>
						<el-col :span="5">总评分</el-col>
						<el-col :span="5">备案率</el-col>
						<el-col :span="5">完成率</el-col>
						<!-- <el-col :span="3">投诉</el-col> -->
					</el-row>
					<!-- <el-row class="sp-item">
            <el-col class="hexagon-col" :span="2">
              <div class="hexagon" :class="`color${5}`">
                {{ 5 }}
              </div>
            </el-col>
            <el-col :span="7"><span>杜堡</span></el-col>
            <el-col :span="5"><span class="num">95</span></el-col>
            <el-col :span="5"><span class="num unit">95</span></el-col>
            <el-col :span="5"><span class="num unit">95</span></el-col>
          </el-row>-->
					<div class="item-box">
						<el-row class="item" v-for="(item, index) in rankList" :key="index">
							<el-col class="hexagon-col" :span="2">
								<div class="hexagon" :class="`color${index}`">{{ index + 1 }}</div>
							</el-col>
							<el-col :span="7">
								<span>{{item.supportUnitName}}</span>
							</el-col>
							<el-col :span="5">
								<span class="num">{{item.finalScore}}</span>
							</el-col>
							<el-col :span="5">
								<span class="num unit">{{item.unitRecordRate}}</span>
							</el-col>
							<el-col :span="5">
								<span class="num unit">{{item.taskCompleteRate}}</span>
							</el-col>
							<!-- <el-col :span="3">
								<span class="num">{{item.complaintCount}}</span>
							</el-col> -->
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		manageGetEnterpriseRecordStat,
		manageGetDomainStat,
		manageGetAppStat,
		manageGetAppletStat,
		manageGetSystemStat,
		manageGetNotifyStat,
		manageGetCheckTaskStat,
		manageGetSupportUnitRanking,
		manageGetEnterpriseOverview
	} from "@/api/dashboard/index";
	export default {
		data() {
			return {
				openIcon: false,
				supportUnitId: "",
				policeOrgOpenIcon: false,
				policeOrgId: "",
				unitName: "",
				ngData: 0, // 纳管单位
				recordRate: 0, // 企业备案率
				teskTypeList: [{
						name: "企业域名备案率：",
						rate: 98
					},
					{
						name: "企业APP备案率：",
						rate: 69
					},
					{
						name: "企业小程序备案率：",
						rate: 69
					},
					{
						name: "企业系统备案率：",
						rate: 69
					},
					{
						name: "企业系统测评率：",
						rate: 69
					},
					{
						name: "企业系统评估率：",
						rate: 69
					},
					{
						name: "企业安全通报率：",
						rate: 69
					}
				],
				teskData: {
					total: 0,
					completeRate: 0,
					adventCount: 0,
					overdueCount: 0,
					typeOneCount: 0,
					typeTwoCount: 0,
					typeThreeCount: 0
				}, // 日常工作情况概览数据
				systemData: {
					total: 0,
					firstLevelCount: 0,
					secondLevelCount: 0,
					thirdLevelCount: 0,
					recordRate: 0,
					testRate: 0,
					evalRate: 0
				}, // 信息系统数据
				propertyList: [{
						total: 69,
						recordRate: 69,
						iconClass: "yuming",
						name: "域名",
						path: "/property/index?tabName=1",
						hasPoliceOrgCodePath: "/property/index?tabName=1&hasPoliceOrgCode=1"
					},
					{
						total: 0,
						recordRate: 0,
						iconClass: "app",
						name: "APP",
						path: "/property/index?tabName=4",
						hasPoliceOrgCodePath: "/property/index?tabName=4&hasPoliceOrgCode=1"
					},
					{
						total: 0,
						recordRate: 0,
						iconClass: "xiaochengxu",
						name: "小程序",
						path: "/property/index?tabName=5",
						hasPoliceOrgCodePath: "/property/index?tabName=5&hasPoliceOrgCode=1"
					}
				],
				rankList: [] // 支撑单位综合排名列表
			};
		},
		computed: {
			avatar() {
				return this.$store.getters.avatar;
			},
			supportUnitDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.supportUnit) {
					list.push({
						label: dict.supportUnit[value],
						value
					});
				}
				return [{
						label: "全区",
						value: ""
					},
					...list
				];
			},
			policeOrgDict() {
				return [{
						label: "全区",
						value: ""
					},
					{
						label: "湖南路派出所",
						value: "湖南路派出所"
					},
					{
						label: "天平路派出所",
						value: "天平路派出所"
					},
					{
						label: "徐家汇派出所",
						value: "徐家汇派出所"
					},
					{
						label: "枫林路派出所",
						value: "枫林路派出所"
					},
					{
						label: "斜土路派出所",
						value: "斜土路派出所"
					},
					{
						label: "田林新村派出所",
						value: "田林新村派出所"
					},
					{
						label: "漕河泾派出所",
						value: "漕河泾派出所"
					},
					{
						label: "虹梅派出所",
						value: "虹梅派出所"
					},
					{
						label: "康建新村派出所",
						value: "康建新村派出所"
					},
					{
						label: "龙华派出所",
						value: "龙华派出所"
					},
					{
						label: "长桥新村派出所",
						value: "长桥新村派出所"
					},
					{
						label: "凌云路派出所",
						value: "凌云路派出所"
					},
					{
						label: "华泾派出所",
						value: "华泾派出所"
					},
					{
						label: "上海南站治安派出所",
						value: "上海南站治安派出所"
					},
					{
						label: "西岸治安派出所",
						value: "西岸治安派出所"
					},
					{
						label: "衡复治安派出所",
						value: "衡复治安派出所"
					},
				];
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.getEnterpriseRecordStat();
				this.getDomainStat();
				this.getAppStat();
				this.getAppletStat();
				this.getSystemStat();
				this.getNotifyStat();
				this.getCheckTaskStat();
				this.getSupportUnitRanking();
			},
			// 首页-企业备案统计
			getEnterpriseRecordStat() {
				manageGetEnterpriseRecordStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					this.ngData = res.data.total;
					this.recordRate = Math.round(res.data.recordRate * 100);
				});
			},
			// 域名数据
			getDomainStat() {
				manageGetDomainStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					// this.$set(this.teskTypeList[0], "rate", rate);
					this.$set(this.propertyList[0], "total", res.data.total);
					this.$set(this.propertyList[0], "recordRate", rate);
				});
			},
			// APP数据
			getAppStat() {
				manageGetAppStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					// this.$set(this.teskTypeList[1], "rate", rate);
					this.$set(this.propertyList[1], "total", res.data.total);
					this.$set(this.propertyList[1], "recordRate", rate);
				});
			},
			// 小程序数据
			getAppletStat() {
				manageGetAppletStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					const rate = Math.round(res.data.recordRate * 100);
					// this.$set(this.teskTypeList[2], "rate", rate);
					this.$set(this.propertyList[2], "total", res.data.total);
					this.$set(this.propertyList[2], "recordRate", rate);
				});
			},
			// 信息系统数据
			getSystemStat() {
				manageGetSystemStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					// 备案率
					// this.$set(
					// 	this.teskTypeList[3],
					// 	"rate",
					// 	Math.round(res.data.recordRate * 100)
					// );
					// 测评率
					// this.$set(
					// 	this.teskTypeList[4],
					// 	"rate",
					// 	Math.round(res.data.testRate * 100)
					// );
					// 评估率
					// this.$set(
					// 	this.teskTypeList[5],
					// 	"rate",
					// 	Math.round(res.data.evalRate * 100)
					// );
					this.systemData = {
						...res.data,
						recordRate: Math.round(res.data.recordRate * 100),
						testRate: Math.round(res.data.testRate * 100),
						evalRate: Math.round(res.data.evalRate * 100)
					};
				});
			},
			// 安全通报率【废弃】
			getNotifyStat() {
				manageGetNotifyStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					this.$set(this.teskTypeList[6], "rate", Math.round(res.data * 100));
					this.getEnterpriseOverview();
				});
			},
			
			//【数据总览】
			getEnterpriseOverview() {
				manageGetEnterpriseOverview({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					this.$set(this.teskTypeList[0], "rate", Math.round(res.data.domainRecordRate * 100));
					this.$set(this.teskTypeList[1], "rate", Math.round(res.data.appRecordRate * 100));
					this.$set(this.teskTypeList[2], "rate", Math.round(res.data.appletRecordRate * 100));
					this.$set(this.teskTypeList[3], "rate", Math.round(res.data.systemRecordRate * 100));
					this.$set(this.teskTypeList[4], "rate", Math.round(res.data.systemTestRate * 100));
					this.$set(this.teskTypeList[5], "rate", Math.round(res.data.systemEvalRate * 100));
				});
			},

			// 任务概览数据
			getCheckTaskStat() {
				manageGetCheckTaskStat({
					supportUnitCode: this.supportUnitId
				}).then(res => {
					this.teskData = {
						...res.data,
						completeRate: Math.round(res.data.completeRate * 100)
					};
				});
			},
			getSupportUnitRanking() {
				manageGetSupportUnitRanking({}).then(res => {
					this.rankList = res.data.map(it => {
						return {
							...it,
							unitRecordRate: Math.round(it.unitRecordRate * 100),
							taskCompleteRate: Math.round(it.taskCompleteRate * 100),
						}
					});
				});
			},
			getBarInnerColor(rate) {
				if (rate < 25) {
					return "#E70819";
				} else if (rate < 50) {
					return "#FE9F01";
				} else if (rate < 75) {
					return "#1C4088";
				} else {
					return "#11B32E";
				}
			},
			openTrue(val) {
				this.openIcon = val;
			},
			changeSupportUnit() {
				this.getEnterpriseRecordStat();
				this.getDomainStat();
				this.getAppStat();
				this.getAppletStat();
				this.getSystemStat();
				this.getNotifyStat();
				this.getCheckTaskStat();
			},
			policeOrgOpenTrue(val) {
				this.policeOrgOpenIcon = val;
			},
			changePoliceOrg() {},
			gotoProperty(path) {
				if (path) {
					this.$router.push({
						path
					});
				}
			},
			gotoEnterprise(unitName) {
				let path = "/enterprise/index";
				if (unitName) {
					path = "/enterprise/index?unitName=" + unitName;
				}
				this.$router.push({
					path
				});
			},
			async logout() {
				this.$confirm("确定退出系统吗？", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$store.dispatch("LogOut").then(() => {
							location.href = "/login";
						});
					})
					.catch(() => {});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.check-dashboard {
		padding: 0.38rem 1.38rem 0;

		.top-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 0.63rem;

			.title {
				font-size: 0.53rem;
			}

			.right {
				display: flex;

				.el-input {
					width: 3.48rem;
					height: 0.6rem;
					font-size: 0.23rem;

					::v-deep .el-input__inner {
						height: 0.6rem;
					}

					.search-icon {
						height: 0.6rem;
						font-size: 0.25rem;
						margin-right: 0.25rem;
					}
				}

				.user {
					display: flex;
					align-items: center;
					margin-left: 0.14rem;
					width: 1.5rem;
					height: 0.6rem;
					background: rgba(255, 255, 255, 0.6);
					box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);
					border-radius: 0.04rem;
					font-size: 0.23rem;
					color: #000822;
					padding-left: 0.1rem;
					box-sizing: border-box;

					img {
						width: 0.45rem;
						height: 0.45rem;
						border-radius: 0.07rem;
						margin-right: 0.11rem;
					}
				}
			}
		}

		.content-part {
			display: flex;

			.left-part {
				flex: 1;
				margin-right: 0.3rem;

				.select-part {
					font-size: 0.3rem;
					color: rgba(0, 8, 34, 0.8);
					display: flex;
					align-items: center;
					// padding: 0.28rem 0.4rem;
					padding: 0 0.4rem;
					height: 0.93rem;

					.myselect {
						position: relative;

						.open-icon {
							position: absolute;
							right: 0.13rem;
							// top: 0.11rem;
							top: 0;
							bottom: 0;
							margin: auto 0;
							font-size: 0.3rem;
							transition: all 0.5s;
						}

						&.open {
							.open-icon {
								transform: rotate(180deg);
							}
						}

						.autoWidth {
							min-width: 1.6rem;
							text-align: start;

							::v-deep {
								.el-input__prefix {
									position: relative;
									left: 0px;
									box-sizing: border-box;
									padding: 0 0.38rem;
									visibility: hidden;

									font-size: 0.38rem;
									color: #1c4088;
									border: none;
									background: transparent;
								}

								.el-input__suffix {
									display: none;
								}

								input {
									position: absolute;
								}

								.el-input__inner {
									font-size: 0.38rem;
									color: #1c4088;
									border: none;
									background: transparent;
									padding-left: 0.3rem;
									height: 100%;
								}
							}
						}
					}
				}

				.chart-part {
					margin-top: 24px;
					display: flex;

					.one-part {
						width: 5.1rem;
						height: 9.45rem;
						margin-right: 0.3rem;

						.content-box {
							margin-top: 0.55rem;
							margin-bottom: 0.64rem;
							padding: 0 0.15rem;

							.content-item {
								width: 2.7rem;
								display: flex;
								justify-content: space-between;
								align-items: center;
								font-size: 0.26rem;
								color: rgba(0, 8, 34, 0.8);

								.num {
									font-size: 0.45rem;
									color: #000822;

									&.unit::after {
										content: "%";
										font-size: 0.38rem;
									}
								}

								&:first-child {
									margin-bottom: 0.26rem;
								}
							}
						}

						.bar-list {
							padding: 0 0.15rem;

							.bar-item {
								width: 100%;
								margin-bottom: 0.19rem;

								.name {
									font-size: 0.26rem;
									color: #000822;
								}

								.bar {
									width: 3.7rem;
									display: flex;
									align-items: center;

									.bar-inner {
										height: 0.07rem;
										border-radius: 1px;
										margin-right: 0.2rem;
									}

									.bar-num {
										font-size: 0.3rem;
										color: #000822;

										&.unit::after {
											content: "%";
											font-size: 0.19rem;
										}
									}
								}
							}
						}
					}

					.two-part {
						flex: 1;
						display: flex;
						flex-direction: column;

						.daily-part {
							margin-bottom: 0.3rem;

							.text-box {
								padding: 0 0.05rem;
								display: flex;
								justify-content: space-between;
								align-items: center;
								text-align: center;
								margin: 0.59rem 0;

								.shu {
									width: 0.8px;
									height: 0.9rem;
									background: rgba(0, 8, 34, 0.3);
								}

								.text-item {
									width: 1.31rem;

									&:first-child {
										margin-right: 0.31rem;
									}

									.num {
										font-size: 0.45rem;
										color: #000822;

										&.unit::after {
											content: "%";
											font-size: 0.3rem;
										}
									}

									.name {
										margin-top: 0.17rem;
										font-size: 0.26rem;
										color: rgba(0, 8, 34, 0.8);
									}
								}
							}

							.extra-text-box {
								padding: 0 0.17rem;
								display: flex;
								justify-content: space-between;
								align-items: center;

								.text-item {
									font-size: 0.26rem;
									color: rgba(0, 8, 34, 0.6);

									.num {
										font-size: 0.3rem;
										color: #000822;
									}
								}
							}
						}

						.property-part {
							flex: 1;

							.num-list {
								margin-top: 0.63rem;
								padding: 0 0.19rem;
								display: flex;
								justify-content: space-between;

								.num-item {
									width: 1.73rem;

									.icon-box {
										width: 100%;
										display: flex;
										justify-content: space-between;
										margin-bottom: 0.3rem;

										.svg-icon {
											font-size: 0.45rem;
											// margin-top: .15rem;
										}

										.right {
											font-size: 0.26rem;
											color: rgba(0, 8, 34, 0.8);
											text-align: right;

											.num {
												font-size: 0.38rem;
												color: #000822;
												margin-top: 0.07rem;
												cursor: pointer;
											}
										}
									}

									.num-box {
										width: 100%;
										display: flex;
										justify-content: space-between;
										font-size: 0.23rem;
										color: rgba(0, 8, 34, 0.6);
										margin-top: 0.11rem;

										.name {
											width: 1.11rem;
										}

										.num {
											cursor: pointer;
											font-size: 0.26rem;
											color: #000822;

											&.unit::after {
												content: "%";
												font-size: 0.19rem;
											}
										}
									}
								}
							}

							.heng {
								width: 100%;
								height: 0.03rem;
								background: rgba(0, 8, 34, 0.3);
								margin: 0.41rem 0 0.46rem;
							}

							.text-box {
								padding: 0 0.19rem;
								display: flex;
								justify-content: space-between;

								.sp-item {
									width: 1.73rem;
									display: flex;
									justify-content: space-between;

									.svg-icon {
										font-size: 0.45rem;
										// margin-top: .15rem;
									}

									.right {
										font-size: 0.26rem;
										color: rgba(0, 8, 34, 0.8);
										text-align: right;

										.num {
											font-size: 0.38rem;
											color: #000822;
											margin-top: 0.07rem;
										}
									}
								}

								.text-item {
									.it {
										&:first-child {
											margin-bottom: 0.21rem;
										}
									}

									font-size: 0.26rem;
									color: rgba(0, 8, 34, 0.6);

									.num {
										color: #000822;

										&.unit::after {
											content: "%";
											font-size: 0.19rem;
										}
									}
								}
							}
						}
					}
				}
			}

			.right-part {
				width: 5.1rem;
				padding: 0.38rem 0.21rem 0 !important;

				.rank-list {
					margin-top: 0.57rem;

					.header {
						text-align: center;
						font-size: 0.23rem;
						color: rgba(0, 8, 34, 0.8);
						// padding: 0 0.21rem;
					}

					.sp-item {
						line-height: 0.66rem;
						border: 2px solid #000000;
						font-size: 0.3rem;
						color: #000822;
						text-align: center;
						margin-top: 0.23rem;
						// padding: 0 0.21rem;

						.hexagon-col {
							height: 0.66rem;
							display: flex;
							align-items: center;
						}

						.hexagon {
							width: 0.3rem;
							height: 0.3rem;
							background: rgba(0, 8, 34, 0.05);
							display: flex;
							align-items: center;
							justify-content: center;
							clip-path: polygon(50% 0%,
									100% 25%,
									100% 75%,
									50% 100%,
									0% 75%,
									0% 25%);
							font-size: 0.19rem;
							color: #000822;
							line-height: 0.3rem;
							text-align: center;

							&.color0 {
								background: #e70819;
								color: #fff;
							}

							&.color1 {
								background: #fe9f01;
								color: #fff;
							}

							&.color2 {
								background: #1c4088;
								color: #fff;
							}
						}

						.num.unit::after {
							content: "%";
							font-size: 0.19rem;
						}
					}
					.item-box {
						height: 9.1rem;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}

					.item {
						// line-height: 0.51rem;
						font-size: 0.29rem;
						color: #000822;
						text-align: center;
						// margin-top: 0.44rem;
						// padding: 0 0.21rem;

						.hexagon-col {
							height: 0.51rem;
							display: flex;
							align-items: center;
						}

						.hexagon {
							width: 0.3rem;
							height: 0.3rem;
							background: rgba(0, 8, 34, 0.05);
							display: flex;
							align-items: center;
							justify-content: center;
							clip-path: polygon(50% 0%,
									100% 25%,
									100% 75%,
									50% 100%,
									0% 75%,
									0% 25%);
							font-size: 0.19rem;
							color: #000822;
							line-height: 0.3rem;
							text-align: center;

							&.color0 {
								background: #e70819;
								color: #fff;
							}

							&.color1 {
								background: #fe9f01;
								color: #fff;
							}

							&.color2 {
								background: #1c4088;
								color: #fff;
							}
						}

						.num.unit::after {
							content: "%";
							font-size: 0.19rem;
						}
					}
				}
			}

			.box {
				padding: 0.38rem;
				box-sizing: border-box;
				background: #fff;
				border-radius: 0.07rem;
				box-shadow: 0px 0.07rem 1.2rem 0.6rem rgba(0, 0, 0, 0.05);

				.title {
					font-size: 0.38rem;
					color: #000822;
					display: flex;
					align-items: center;

					&::before {
						content: "";
						display: block;
						width: 0.04rem;
						height: 0.3rem;
						background: #1c4088;
						margin-right: 0.15rem;
					}
				}
			}
		}
	}
</style>